<template>
  <ul class="sup_list">
    <li class="sup_item" v-for="item in superList" :key="item.id">
      <h2>{{item.title}}</h2>
      <div class="sup_content">
        <img
          v-for="(i,index) in item.image"
          :key="i.id"
          v-show="index == 0"
          class="sup_image"
          :src="i.image"
          alt
        />
        <div class="sup_image" v-show="item.image.length == 0">
          <img class="nodata_img" src="~assets/img/nodata.png" alt />
          <span>暂无图片</span>
        </div>
        <div class="sup_info">
          <div>
            <!-- <p>{{item.desc}}</p> -->
            {{item.desc}}
          </div>
          <span>{{item.create_at}}</span>
        </div>
      </div>
    </li>
    <li v-show="noMoreData" class="noMoreData">没有更多数据了</li>
  </ul>
</template>

<script>
export default {
  name: "SupList",
  props: {
    superList: {
      type: Array,
      default:  [],
    },
    noMoreData: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="less" scoped>
.sup_list {
  margin-bottom: 64px;
  .sup_item {
    margin: 10px;
    padding: 15px;
    color: #333;
    font-size: 15px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
    h2 {
      margin-bottom: 20px;
    }
    .sup_content {
      display: flex;
      // height: 74px;
      .sup_image {
        width: 100px;
        height: 100px;
        font-size: 12px;
        text-align: center;
        border-radius: 6px;
        .nodata_img {
          display: block;
          margin: 0 auto;
          margin-bottom: 10px;
          width: 40%;
        }
      }
      .sup_info {
        padding: 0 20px;
        flex: 1;
        font-size: 12px;
        color: #999;
        div {
          width: 190px; 
          min-height: 50px;
          max-height: 70px;
          line-height: 20px;
          font-size: 14px;
          color: #333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        span {
          float: right;
        }
      }
    }
  }

  .noMoreData {
    text-align: center;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
  }
}
</style>